<template>
  <app-container :percept="percept">
    <view class="container">
      <!--  <app-safearea :cushion-height="140">  </app-safearea> -->
      <app-navbar :title="$t('common.mine')" :show-left="false"></app-navbar>
      <app-tabbar current="mine"></app-tabbar>
      <view class="flex-col page">
        <view class="flex-col section">
          <view class="flex-row justify-end section_3" @click="handleGoSetting">
            <image class="ml-12 image_4" src="@/static/mine/setting.png" />
          </view>
          <view class="flex-col group">
            <view class="flex-col">
              <view class="flex-row items-center group_2">
                <image class="image_5" src="https://miniflix.tos-ap-southeast-1.volces.com/res/default.png" />
                <view class="ml-12 flex-col flex-1 group_3">
                  <view class="flex-row items-center self-stretch group_4">
                    <text class="text_2">{{ profile.nickName }}</text>
                    <image class="ml-10 image_7" :src="'/static/mine/level' + profile.appLevel + '.png'" v-if="profile.appLevel > 0" />
                  </view>

                  <view class="flex-row items-center self-start section_4">
                    <text class="font text_3">{{ $t('mine.inviteCode') }}</text>
                    <text class="ml-8 font text_4">{{ profile.inviteCode }}</text>
                    <image class="ml-8 image_8" src="@/static/mine/copy.png" />
                  </view>
                </view>
              </view>
              <view class="flex-row items-start equal-division section_5">
                <view class="flex-col items-center equal-division-item" @click="handleWalletClick">
                  <image class="image_9" src="@/static/mine/wallet.png" />
                  <text class="font mt-7">{{ $t('mine.wallet') }}</text>
                </view>
                <view class="flex-col items-center group_5 equal-division-item" @click="handleDramaClick">
                  <image class="image_9" src="@/static/mine/welfare.png" />
                  <text class="font mt-7">{{ $t('mine.welfare') }}</text>
                </view>
                <view class="flex-col items-center equal-division-item_2 group_6" @click="skipToInvite">
                  <image class="image_9" src="@/static/mine/invite.png" />
                  <text class="font text_5 mt-7">{{ $t('mine.invite') }}</text>
                </view>
              </view>
            </view>
            <view class="mt-30 flex-col group_7">
              <view class="flex-row items-center self-stretch group_8">
                <u-tabs
                  :list="tabList"
                  v-model="activeIndex"
                  lineWidth="30"
                  lineColor="linear-gradient(68.5deg, #0dfcd2 1.7%, #0dfcd200 98.3%)"
                  :activeStyle="{
                    color: ' #ffffff',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)'
                  }"
                  :inactiveStyle="{
                    color: ' #ffffff80',
                    transform: 'scale(1)'
                  }"
                  itemStyle=" padding-right: 15px; height: 30px;"
                  style="margin-left: 10px"
                  @change="handleTabChange"
                ></u-tabs>
              </view>
            </view>
          </view>
        </view>
        <view class="flex-col relative group_9" v-if="activeIndex === 0">
          <!-- <view class="flex-row horiz-list justify-around">
            <view class="flex-col horiz-list-item section_7">
              <view class="flex-col section_10">
                <text class="font_3 text_8">Watched 5 episodes</text>
                <view class="flex-col justify-start items-start divider mt-5">
                  <view class="section_11"></view>
                </view>
              </view>
            </view>
            <view class="ml-8 flex-col horiz-list-item section_8">
              <view class="flex-col section_10">
                <text class="font_3 text_8">Watched 5 episodes</text>
                <view class="flex-col justify-start items-start divider mt-5">
                  <view class="section_12"></view>
                </view>
              </view>
            </view>
            <view class="ml-8 flex-col  items-start horiz-list-item section_9">
              <view class="flex-col justify-start text-wrapper"><text class="font_3 text_9">Watched 5 episodes</text></view>
            </view>
          </view> -->
          <image class="shrink-0 self-center image_10" src="@/static/common/empty.png" />
          <text class="mt-10 self-center font_2 text_8">{{ $t('mine.noData') }}</text>
        </view>
        <view class="flex-col relative group_9" v-if="activeIndex === 1">
          <image class="shrink-0 self-center image_10" src="@/static/common/empty.png" />
          <text class="mt-10 self-center font_2 text_8">{{ $t('mine.noData') }}</text>
        </view>
      </view>
    </view>
  </app-container>
</template>

<script>
import { mapGetters } from 'vuex';
import lifecycleMixin from '@/mixins/lifecycle.js';
import AppNavbar from '@/components/AppNavbar.vue';
import AppTabbar from '@/components/AppTabbar.vue';
import { getProfile } from '@/service/mine';

export default {
  mixins: [lifecycleMixin],
  components: { AppNavbar, AppTabbar },
  data() {
    return {
      activeIndex: 0, // 默认选中第一�tab
      tabList: [{ name: this.$t('mine.viewHistory') }, { name: this.$t('mine.chase') }]
    };
  },
  computed: {
    ...mapGetters({
      profile: 'user/getProfile'
    })
  },
  mounted() {
   this.getProfile();
  },

  onShow() {
    this.tabList = [{ name: this.$t('mine.viewHistory') }, { name: this.$t('mine.chase') }];
  },

  methods: {
    handleGoSetting() {
      uni.navigateTo({ url: '/pages/mine/settings/index' });
    },
    handleDramaClick() {
      uni.switchTab({
        url: '/pages/drama/index'
      });
    },
    handleWalletClick() {
      uni.navigateTo({ url: '/pages/mine/wallet/index' });
    },
    async getProfile() {
      const res = await getProfile();
      this.$store.commit('user/setProfile', res.data);
    },
    handleTabChange({ index }) {
      this.activeIndex = index;
    },
    skipToWallet() {
      uni.navigateTo({ url: '/pages/mine/wallet' });
    },
    skipToInvite() {
      uni.navigateTo({ url: '/pages/mine/invitation/index' });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-image: url('@/static/common/b-home.png');
  background-size: cover;
  padding-bottom: 10rem;
  min-height: 100%;
  color: #ffffff;

  .ml-5 {
    margin-left: 0.31rem;
  }

  .mt-7 {
    margin-top: 0.44rem;
  }

  .mt-5 {
    margin-top: 0.31rem;
  }

  .mt-213 {
    margin-top: 13.31rem;
  }

  .page {
    padding-bottom: 2rem;
    // background-color: #140c2b;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;

    .section {
      padding-bottom: 5.06rem;
      // background-image: url('@/static/mine/mine-bg.png');
      // background-size: 100% 100%;
      // background-repeat: no-repeat;

      .section_2 {
        padding: 1.13rem 1rem 1.13rem 2.25rem;
        background-color: #33333300;

        .text {
          color: #ffffff;
        }

        .image {
          width: 1.06rem;
          height: 0.56rem;
        }

        .image_2 {
          width: 0.94rem;
          height: 0.56rem;
        }

        .image_3 {
          width: 1.5rem;
          height: 0.71rem;
        }
      }

      .section_3 {
        padding: 0.5rem 1rem;
        background-color: #ffffff00;

        .image_4 {
          border-radius: 0.5rem;
          width: 1.75rem;
          height: 1.75rem;
        }
      }

      .group {
        padding: 0.5rem 1rem 0;

        .group_2 {
          padding-bottom: 1rem;

          .image_5 {
            border-radius: 50%;
            width: 4.5rem;
            height: 4.5rem;
          }

          .group_3 {
            margin-right: 1.25rem;

            .group_4 {
              padding-bottom: 0.88rem;

              .image_7 {
                width: 2.19rem;
                height: 1rem;
              }

              .text_2 {
                color: #ffffff;
                font-size: 1.13rem;
                font-family: PingFang SC;
                line-height: 0.83rem;
              }

              .image_6 {
                width: 1.25rem;
                height: 1.25rem;
              }
            }

            .section_4 {
              padding: 0.25rem 0;
              background-color: #ffffff33;
              border-radius: 0.25rem;
              //width: 11rem;

              .text_3 {
                margin-left: 0.5rem;
                color: #ffffff80;
                line-height: 0.55rem;
              }

              .text_4 {
                line-height: 0.69rem;
              }

              .image_8 {
                width: 0.75rem;
                height: 0.75rem;
                margin-right: 0.5rem;
              }
            }
          }
        }

        .equal-division {
          position: relative;

          .equal-division-item {
            padding: 0.25rem 0;
            width: 7.15rem;
          }

          .group_5 {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }

          .image_9 {
            width: 2rem;
            height: 2rem;
          }

          .equal-division-item_2 {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);

            .text_5 {
              line-height: 0.55rem;
            }
          }

          .group_6 {
            padding: 0.25rem 0;
            width: 7.15rem;
          }
        }

        .section_5 {
          padding: 0.69rem 0 1rem;
          background-color: #ffffff33;
          border-radius: 1rem;
          box-shadow: 0rem -0.75rem 1.5rem #05dfff1a inset, 0rem 0.75rem 1.5rem #fb98ad26 inset, 0rem 0.25rem 0.5rem #0000004d;
          backdrop-filter: blur(1rem);
        }

        .group_7 {
          padding-bottom: 0.75rem;
          border-bottom: solid 0.031rem #ffffff1a;

          /deep/ .u-tabs__wrapper__nav__line {
            position: absolute;
            bottom: 4rpx;
            border-radius: 200rpx;
            background-image: linear-gradient(68.5deg, #0dfcd2 1.7%, #0dfcd200 98.3%);
            border-radius: 0.75rem;
            width: 2.75rem;
            height: 0.25rem;
            left: -12rpx;
          }

          .group_8 {
            padding-bottom: 0.25rem;

            .font_2 {
              font-size: 1rem;
              font-family: PingFang SC;
            }

            .text_6 {
              color: #ffffff;
              line-height: 0.93rem;
            }

            .text_7 {
              color: #ffffff80;
              line-height: 0.74rem;
            }
          }

          .section_6 {
            margin-left: 2.31rem;
            background-image: linear-gradient(79.8deg, #0dfcd2 1.7%, #0dfcd200 98.3%);
            border-radius: 0.75rem;
            width: 1.25rem;
            height: 0.25rem;
          }
        }
      }

      .font {
        font-size: 0.75rem;
        font-family: PingFang SC;
        line-height: 0.56rem;
        color: #ffffffb3;
      }
    }

    .group_9 {
      margin-top: -4.31rem;
      padding: 1rem;

      .image_10 {
        margin-top: 1.31rem;
        width: 16.88rem;
        height: 9.5rem;
      }

      .font_2 {
        font-size: 1rem;
        font-family: PingFang SC;
        line-height: 0.93rem;
      }

      .text_8 {
        color: #ffffff80;
      }

      .horiz-list {
        overflow-x: auto;

        .horiz-list-item {
          flex-shrink: 0;

          .section_10 {
            padding: 1rem 0.5rem 0;
            background-image: linear-gradient(0deg, #000000 23.1%, #00000000 100%);
            border-radius: 0rem 0rem 0.5rem 0.5rem;
            width: 7.38rem;

            .text_8 {
              margin-left: 0.25rem;
              line-height: 0.58rem;
            }

            .divider {
              background-color: #ffffff;
              border-radius: 0.88rem;

              .section_11 {
                background-color: #0dfcd2;
                border-radius: 0.88rem;
                width: 2.44rem;
                height: 0.063rem;
              }

              .section_12 {
                background-color: #0dfcd2;
                border-radius: 0.88rem;
                width: 4.56rem;
                height: 0.063rem;
              }
            }
          }

          .text-wrapper {
            padding: 1rem 0 0.38rem;
            background-image: linear-gradient(0deg, #000000 23.1%, #00000000 100%);
            border-radius: 0rem 0 0 0.5rem;
            border-bottom: solid 0.063rem #0dfcd2;

            .text_9 {
              margin-left: 0.75rem;
              line-height: 0.58rem;
            }
          }

          .font_3 {
            font-size: 0.63rem;
            font-family: PingFang SC;
            line-height: 0.56rem;
            color: #ffffff;
          }
        }
      }

      .equal-division_2 {
        position: relative;
        margin-right: 1rem;

        .equal-division-item_3 {
          padding: 0.25rem 0;
          width: 5.36rem;
        }

        .group_10 {
          margin-left: 1.75rem;

          .text_10 {
            color: #ffffff;
          }
        }

        .image_10 {
          width: 1.5rem;
          height: 1.5rem;
        }

        .font_4 {
          font-size: 0.63rem;
          font-family: PingFang SC;
          line-height: 0.46rem;
          color: #ffffff80;
        }
      }

      .section_13 {
        padding: 0.44rem 0 0.63rem;
        background-color: #ffffff1a;
        border-radius: 2rem;
        box-shadow: 0rem 0rem 2rem #05dfff1a inset, 0rem 0rem 1rem #00000033;
        backdrop-filter: blur(1rem);
      }
    }
  }
}
</style>
